<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {debounce} from "@/common/utils";

export default {
  name: "BScroll",
  data() {
    return {
      bScroll: null
    }
  },
  props: {
    probeType: {
      type: Number,
      default: 0
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    scrollTo(x, y, time = 500) {
      this.bScroll.scrollTo(x, y, time)
    },
    finishPullUp() {
      this.bScroll.finishPullUp()
    },
    refresh() {
      this.bScroll.refresh();
    }
  },
  mounted() {
    this.$nextTick(() => {
          this.bScroll = new BScroll(this.$refs.wrapper, {
            click: true,
            probeType: this.probeType,
            pullUpLoad: this.pullUpLoad
          });

          this.bScroll.on('scroll', (position) => {
            this.$emit('scroll', position);
          })

          this.bScroll.on('pullingUp', () => {
            this.$emit('pullingUp')
          })

          const imgLoadEnd = debounce(() => {
            this.refresh();
          }, 1000)

          this.$bus.$on('refresh', () => {
            imgLoadEnd();
          })
        }
    )
  },
  destroyed() {
    this.$bus.$off('refresh')
  }
}
</script>

<style scoped>

</style>